<script setup name="listheader">
import { computed } from "vue"
const props = defineProps({
  create: {
    type: String,
    default: "新增"
  },
  refresh: {
    type: String,
    default: "刷新数据"
  },
  deleteData: {
    type: String,
    default: "批量删除"
  },
  layout: {
    type: String,
    default: "create,refresh"
  },
  CrPlacement: {
    type: String,
    default: "right"
  },
  RePlacement: {
    type: String,
    default: "left"
  },
  multiSelection: {
    type: Array
  }
})
const showVal = computed(() => props.layout.split(","))
defineEmits(["create", "refresh", "delete"])
</script>

<template>
  <div class="list-header">
    <div class="left">
      <el-tooltip v-if="showVal.includes('create')" effect="light" :content="create" :placement="CrPlacement">
        <el-button type="primary" size="small" @click="$emit('create')">
          <el-icon>
            <Plus />
          </el-icon>
        </el-button>
      </el-tooltip>
      <el-popconfirm v-if="showVal.includes('deleteData') && multiSelection.length" width="172" title="是否删除选中记录？" confirmButtonText="确认" cancelButtonText="取消" @confirm="$emit('delete')">
        <template #reference>
          <el-button type="danger" size="small">
            <el-icon>
              <Close />
            </el-icon>
            <span>批量删除</span>
          </el-button>
        </template>
      </el-popconfirm>
      <slot />
    </div>
    <el-tooltip v-if="showVal.includes('refresh')" effect="light" :content="refresh" :placement="RePlacement">
      <el-icon :size="20" @click="$emit('refresh')">
        <RefreshRight />
      </el-icon>
    </el-tooltip>
  </div>
</template>

<style lang="scss" scoped>
.list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 0 20px;
  .el-icon {
    cursor: pointer;
  }
  .left {
    .el-button {
      margin: 0 2px;
    }
  }
  .el-icon:first-child {
    color: var(--white);
  }
}
</style>
